<template>
  <div class="page">
    <div class="main">sass</div>
    <div class="footer">footer</div>
  </div>
</template>
<style lang="scss" scoped>
// 变量
$red: red;
// 混合器
@mixin wh($w, $h) {
  width: $w;
  height: $h;
}
// 继承
.bg {
  background-color: aqua;
}
// 函数
@function size($s){
    @return $s * 10;
}
// 嵌套
.page {
  width: 200px;
  height: 200px;
  background-color: pink;
  .main {
    color: $red;
    font-size: size(4px);
  }
  .footer {
    @include wh(50px, 50px);
    @extend .bg;
  }
}
</style>